<template>
  <div class="loading2" :style="{display: loading?'block':'none'}">
    <div class="item" v-for="(item,index) in classList" :key="index" v-if="item===preClass">
      <i class="loader" :class="item"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: "loading2",
    props: {
      loading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        preClass: 'loader1',
        classList: [
          'loader1',
          'loader2',
          'loader3',
          'loader4',
          'loader5',
          'loader6',
          'loader7',
          'loader8',
          'loader9'
        ],
      }
    },
    created() {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .loading2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1000;
    background: rgba(255,255,255,0.4);
    /*background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);*/
    font-family: 'Noto Sans', sans-serif;
    color: white;
    text-align: center;
    letter-spacing: 0.3px;
    .loader {
      --color: rgba(0,0,0,0.5);
      --size-mid: 6vmin;
      --size-dot: 1.5vmin;
      --size-bar: 0.4vmin;
      --size-square: 3vmin;

      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      display: grid;
      place-items: center;
    }

    .loader::before,
    .loader::after {
      content: '';
      box-sizing: border-box;
      position: absolute;
    }

    /**
      loader --1
    **/
    .loader1::before {
      width: var(--size-mid);
      height: var(--size-mid);
      border: 4px solid var(--color);
      border-top-color: transparent;
      border-radius: 50%;
      -webkit-animation: loader-1 1s linear infinite;
      animation: loader-1 1s linear infinite;
    }

    .loader1::after {
      width: calc(var(--size-mid) - 2px);
      height: calc(var(--size-mid) - 2px);
      border: 2px solid transparent;
      border-top-color: var(--color);
      border-radius: 50%;
      animation: loader-1 0.6s linear reverse infinite;
    }

    @-webkit-keyframes loader-1 {
      100% {
        transform: rotate(1turn);
      }
    }

    @keyframes loader-1 {
      100% {
        transform: rotate(1turn);
      }
    }

    /**
      loader --2
    **/
    .loader2::before,
    .loader2::after {
      width: var(--size-dot);
      height: var(--size-dot);
      background-color: var(--color);
      border-radius: 50%;
      opacity: 0;
      -webkit-animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
      animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
    }

    .loader2::after {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    @-webkit-keyframes loader-2 {
      0%, 80%, 100% {
        opacity: 0;
      }

      33% {
        opacity: 1;
      }

      0%, 100% {
        transform: translateX(-4vmin);
      }

      90% {
        transform: translateX(4vmin);
      }
    }

    @keyframes loader-2 {
      0%, 80%, 100% {
        opacity: 0;
      }

      33% {
        opacity: 1;
      }

      0%, 100% {
        transform: translateX(-4vmin);
      }

      90% {
        transform: translateX(4vmin);
      }
    }

    /**
      loader --3
    **/
    .loader3::before,
    .loader3::after {
      width: var(--size-dot);
      height: var(--size-dot);
      background-color: var(--color);
      border-radius: 50%;
      -webkit-animation: loader-3 1.2s ease-in-out infinite;
      animation: loader-3 1.2s ease-in-out infinite;
    }

    .loader3::before {
      left: calc(50% - 1.6vmin - var(--size-dot));
    }

    .loader3::after {
      left: calc(50% + 1.6vmin);
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    @-webkit-keyframes loader-3 {
      0%, 100% {
        transform: translateY(-2.6vmin);
      }

      44% {
        transform: translateY(2.6vmin);
      }
    }

    @keyframes loader-3 {
      0%, 100% {
        transform: translateY(-2.6vmin);
      }

      44% {
        transform: translateY(2.6vmin);
      }
    }

    /**
      loader --4
    **/
    .loader4::before {
      height: var(--size-bar);
      width: 6vmin;
      background-color: var(--color);
      -webkit-animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
      animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
    }

    @-webkit-keyframes loader-4 {
      0%, 44%, 88.1%, 100% {
        transform-origin: left;
      }

      0%, 100%, 88% {
        transform: scaleX(0);
      }

      44.1%, 88% {
        transform-origin: right;
      }

      33%, 44% {
        transform: scaleX(1);
      }
    }

    @keyframes loader-4 {
      0%, 44%, 88.1%, 100% {
        transform-origin: left;
      }

      0%, 100%, 88% {
        transform: scaleX(0);
      }

      44.1%, 88% {
        transform-origin: right;
      }

      33%, 44% {
        transform: scaleX(1);
      }
    }

    /**
      loader --5
    **/
    .loader5::before,
    .loader5::after {
      height: 3vmin;
      width: var(--size-bar);
      background-color: var(--color);
      -webkit-animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
      animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
    }

    .loader5::before {
      left: calc(50% - 1vmin);
      top: calc(50% - 3vmin);
    }

    .loader5::after {
      left: calc(50% + 1vmin);
      top: calc(50% - 1vmin);
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    @-webkit-keyframes loader-5 {
      0%, 88%, 100% {
        opacity: 0;
      }

      0% {
        transform: translateY(-6vmin);
      }

      33% {
        opacity: 1;
      }

      33%, 88% {
        transform: translateY(3vmin);
      }
    }

    @keyframes loader-5 {
      0%, 88%, 100% {
        opacity: 0;
      }

      0% {
        transform: translateY(-6vmin);
      }

      33% {
        opacity: 1;
      }

      33%, 88% {
        transform: translateY(3vmin);
      }
    }

    /**
      loader --6
    **/
    .loader6::before {
      width: var(--size-square);
      height: var(--size-square);
      background-color: var(--color);
      top: calc(50% - var(--size-square));
      left: calc(50% - var(--size-square));
      -webkit-animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
      animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
    }

    @-webkit-keyframes loader-6 {
      0%, 100% {
        transform: none;
      }

      25% {
        transform: translateX(100%);
      }

      50% {
        transform: translateX(100%) translateY(100%);
      }

      75% {
        transform: translateY(100%);
      }
    }

    @keyframes loader-6 {
      0%, 100% {
        transform: none;
      }

      25% {
        transform: translateX(100%);
      }

      50% {
        transform: translateX(100%) translateY(100%);
      }

      75% {
        transform: translateY(100%);
      }
    }

    /**
      loader --7
    **/
    .loader7::before,
    .loader7::after	{
      width: var(--size-square);
      height: var(--size-square);
      background-color: var(--color);
    }

    .loader7::before {
      top: calc(50% - var(--size-square));
      left: calc(50% - var(--size-square));
      -webkit-animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
      animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
    }

    .loader7::after {
      top: 50%;
      left: 50%;
      -webkit-animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
      animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
    }

    @-webkit-keyframes loader-7 {
      0%, 100% {
        transform: none;
      }

      25% {
        transform: translateX(-100%);
      }

      50% {
        transform: translateX(-100%) translateY(-100%);
      }

      75% {
        transform: translateY(-100%);
      }
    }

    @keyframes loader-7 {
      0%, 100% {
        transform: none;
      }

      25% {
        transform: translateX(-100%);
      }

      50% {
        transform: translateX(-100%) translateY(-100%);
      }

      75% {
        transform: translateY(-100%);
      }
    }

    /**
      loader --8
    **/
    .loader8::before,
    .loader8::after {
      width: var(--size-dot);
      height: var(--size-dot);
      border-radius: 50%;
      background-color: var(--color);
    }

    .loader8::before {
      top: calc(50% + 4vmin);
      -webkit-animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
      animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
    }

    .loader8::after {
      opacity: 0;
      top: calc(50% - 2vmin);
      -webkit-animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
      animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
    }

    @-webkit-keyframes loader-8-1 {
      0%, 55%, 100% {
        opacity: 0;
      }

      0% {
        transform: scale(0.2);
      }

      22% {
        opacity: 1;
      }

      33%, 55% {
        transform: scale(1) translateY(-6vmin);
      }
    }

    @keyframes loader-8-1 {
      0%, 55%, 100% {
        opacity: 0;
      }

      0% {
        transform: scale(0.2);
      }

      22% {
        opacity: 1;
      }

      33%, 55% {
        transform: scale(1) translateY(-6vmin);
      }
    }

    @-webkit-keyframes loader-8-2 {
      0%, 100% {
        opacity: 0;
      }

      33% {
        opacity: 0.3;
      }

      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(4);
      }
    }

    @keyframes loader-8-2 {
      0%, 100% {
        opacity: 0;
      }

      33% {
        opacity: 0.3;
      }

      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(4);
      }
    }

    /**
      loader --9
    **/
    .loader9::before,
    .loader9::after {
      width: var(--size-dot);
      height: var(--size-dot);
      border-radius: 50%;
      background-color: var(--color);
      -webkit-animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
      animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
    }

    .loader9::before {
      left: calc(50% - var(--size-dot) - 1.6vmin);
    }

    .loader9::after {
      left: calc(50% + 1.6vmin);
      -webkit-animation-delay: 0.12s;
      animation-delay: 0.12s;
    }

    @-webkit-keyframes loader-9 {
      0%, 100% {
        opacity: 0;
      }

      0% {
        transform: translate(-4vmin, -4vmin);
      }

      66% {
        opacity: 1;
      }

      66%, 100% {
        transform: none;
      }
    }

    @keyframes loader-9 {
      0%, 100% {
        opacity: 0;
      }

      0% {
        transform: translate(-4vmin, -4vmin);
      }

      66% {
        opacity: 1;
      }

      66%, 100% {
        transform: none;
      }
    }

    /**
      miscs
    **/

    .container {
      display: grid;
      grid-template-columns: repeat(3, 18vmin);
      grid-template-rows: repeat(3, 18vmin);
      grid-gap: 1vmin;
    }

    .item	{
      background: rgba(255, 255, 255, 0.1);
      display: grid;
      place-items: center;
      border-radius: 4px;
    }

    .page {
      margin: auto;
    }

    .header {
      margin-bottom: 4vmin;
    }

    .header-title {
      font-size: 3.75vmin;
    }

    .header-subtitle {
      font-size: 2vmin;
      text-transform: uppercase;
      opacity: 0.6;
    }
  }
</style>
